<template>
    <div class="forgot">
        <pub-top isBorder="true" title="忘记密码"></pub-top>


        <div class="forgot-info flexv">
            <div class="forgot-init flex">
                <span class="id-img flex">
                    <img src="@/assets/id-ico.png" alt="" v-if="!tel">
                    <img src="@/assets/id-ico-on.png" alt="" v-else>
                </span>
                <input type="tel" placeholder="请输入手机号码" class="flex1" v-model="tel">
            </div>

            <div class="forgot-init flex">
                <span class="code-img flex">
                    <img src="@/assets/code-ico.png" alt="" v-if="!code">
                    <img src="@/assets/code-ico-on.png" alt="" v-else>
                </span>
                <input type="text" placeholder="请输入验证码" class="flex1" v-model="code">
                <span class="get-code" @click="getCode(60)" v-if="first">获取动态验证码</span>
                <span class="get-code" v-if="!first" v-html="count"></span>
            </div>

            <div class="forgot-init flex">
                <span class="pwd-img flex">
                    <img src="@/assets/pwd-ico.png" alt="" v-if="!pwd">
                    <img src="@/assets/pwd-ico-on.png" alt="" v-else>
                </span>
                <input type="password" placeholder="请输入密码" class="flex1" v-model="pwd">
            </div>

            <div class="forgot-init flex">
                <span class="pwd-img flex">
                    <img src="@/assets/pwd-ico.png" alt="" v-if="!rpwd">
                    <img src="@/assets/pwd-ico-on.png" alt="" v-else>
                </span>
                <input type="password" placeholder="请确认密码" class="flex1" v-model="rpwd">
            </div>

            <div class="forgot-btn" @click="forgot">确定</div>
        </div>

    </div>
</template>
<script>
import Vue from 'vue';
import { mapState } from 'vuex';
import pubTop from '@/components/top'
import { Toast } from 'vant';
export default {
    data(){
        return{
            first: true,
            count: '60 S',
            tel: null,
            code: null,
            pwd: null,
            rpwd: null,
        }
    },
    watch: {
        tel(newVal, oldVal){
            if(!(/^[0-9]*$/).test(this.tel)){
                this.tel = null
            }
        },
        code(newVal, oldVal){
            if(!(/^[A-Za-z0-9]+$/).test(this.code)){
                this.code = null
            }
        },
        pwd(newVal, oldVal){
            if(!(/^[A-Za-z0-9]+$/).test(this.pwd)){
                this.pwd = null
            }
        },
        rpwd(newVal, oldVal){
            if(!(/^[A-Za-z0-9]+$/).test(this.rpwd)){
                this.rpwd = null
            }
        },
    },
    computed: {
        ...mapState(['user'])
    },
    components: {
        pubTop
    },
    methods: {
        getCode(time){
            const that = this;
            if(!this.tel){
                Toast({
                    duration: 1800,
                    message: '请输入手机号！'
                })
                return
            }
            if(!(/^0?((13|14|15|16|17|18|19)[0-9])[0-9]{8}$/).test(this.tel)){
                Toast({
                    duration: 1800,
                    message: '请输入正确手机号！'
                })
                return
            }
            this.axios.get('http://jxjq.0791jr.com/index.php?m=App&c=MsgCode&a=sendCode', {
                params: {
                    uid: this.$store.state.user.uid,
                    mobile: this.tel
                }
            }).then(res => {
                if (res.data.code == 200) {
                    that.first = false;
                    const timer = setInterval(() =>{
                        time--;
                        that.count = time + ' S';
                        if (time <= 0) {
                            that.first = true;
                            clearInterval(timer);
                        }
                    },1000)
                    Toast({
                        duration: 1800,
                        message: res.data.msg
                    })
                } else {
                    Toast({
                        duration: 1800,
                        message: res.data.msg
                    })
                }
            })
        },
        forgot(){
            const that = this;
            if(!this.tel){
                Toast({
                    duration: 1800,
                    message: '请输入手机号'
                })
                return
            }
            if(!(/^0?((13|14|15|16|17|18|19)[0-9])[0-9]{8}$/).test(this.tel)){
                Toast({
                    duration: 1800,
                    message: '请输入正确的手机号！'
                })
                return
            }
            if(!this.code){
                Toast({
                    duration: 1800,
                    message: '请输入验证码！'
                })
                return
            }
            if(!this.pwd){
                Toast({
                    duration: 1800,
                    message: '请输入密码！'
                })
                return
            }
            if(!this.rpwd){
                Toast({
                    duration: 1800,
                    message: '请确认密码！'
                })
                return
            }
            if(this.pwd != this.pwd){
                Toast({
                    duration: 1800,
                    message: '确认密码错误！'
                })
                return
            }
            this.axios.get('http://jxjq.0791jr.com/index.php?m=App&c=Login&a=forget_password', {
                params: {
                    mobile: this.tel,
                    code: this.code,
                    pwd: this.pwd,
                    cpwd: this.rpwd,
                    uid: this.$store.state.user.uid
                }
            }).then(res => {
                if(res.data.code == 200){
                    Toast({
                        duration: 1800,
                        message: res.data.msg
                    })
                    setTimeout(function(){
                        that.$router.go(-1)
                    },2000)
                }else{
                    Toast({
                        duration: 1800,
                        message: res.data.msg
                    })
                }
            })
        },
        accept(){
            this.agree = !this.agree
        },
    },
}
</script>
<style lang="less" scoped>
.forgot{
    min-height: 100vh;
    background-color: #fff;
    .top{
        width: 100%;
        height: 0.88rem;
        border-bottom: 1px solid #dcdcdc;
        font-size: 0.34rem;
        text-align: center;
        font-weight: bold;
        line-height: 0.88rem;
        color: #333;
    }
    .logo{
        width: 100%;
        height: 3.62rem;
    }
    .forgot-info{
        width: 100%;
        height: auto;
        .forgot-init{
            width: 6rem;
            height: 1.1rem;
            margin: 0 auto;
            border-bottom: 1px solid #ddd;
            .id-img{
                width: 0.35rem;
                height: 0.35rem;
                margin: auto 0.28rem auto 0;
            }
            .code-img{
                width: 0.35rem;
                height: 0.34rem;
                margin: auto 0.28rem auto 0;
            }
            .pwd-img{
                width: 0.3rem;
                height: 0.35rem;
                margin: auto 0.28rem auto 0;
            }
            input{
                border: none;
                font-size: 0.28rem;
                line-height: 1.1rem;
                color: #333;
            }
            .get-code {
                width: 2.8rem;
                height: 0.3rem;
                margin: auto 0 auto 0.2rem;
                font-size: 0.26rem;
                line-height: 0.3rem;
                text-align: center;
                color: #ff4444;
                cursor: pointer;
            }
        }
        .forgot-btn {
            width: 6rem;
            height: 0.88rem;
            margin: 0.5rem auto 0;
            border-radius: 0.1rem;
            font-size: 0.32rem;
            line-height: 0.88rem;;
            text-align: center;
            color: #fff;
            background-color: #0497ec;
            cursor: pointer;
        }
    }
}
</style>

